<template>
    <div id="">
      <h4>添加车辆信息</h4>
      <div class="divinp">
        <div class="inp">
          <span>购买时间：</span><input type="date"  v-model="gotime">
        </div>
        <div class="inp">
          <span>品牌：</span><input type="text"  v-model="gopinp">
        </div>
        <div class="inp">
          <span>车牌号：</span><input type="text" v-model="gotchehao">
        </div>
        <div class="inp">
          <span>车辆类型：</span>
          <select v-model="gottype">
            <option value="小轿车">小轿车</option>
            <option value="大客车">大客车</option>
            <option value="大卡车">大卡车</option>
            <option itany="itany" value="">请选择车辆类型</option>
          </select>
        </div>
        <div class="inp">
          <span>总里程：</span><input type="text"  v-model="gotli">
        </div>
        <div class="inp">
          <span>油耗：</span><input type="text"  v-model="gotyouhao">
        </div>
        <div class="inp">
          <span>基本费用：</span><input type="text"  v-model="gofyong">
        </div>
        <div class="inp">
          <span>养路费：</span><input type="text"  v-model="goyanglu">
        </div>
        <div class="inp">
          <span>总费用：</span><input type="text"  v-model="gozongf">
        </div>
        <div class="inp" :class="this.gottype!='大客车'?classType:Classtt">
          <span>核载人数：</span><input type="text"  v-model="gorshu">
        </div>
        <div class="inp" :class="this.gottype!='小轿车'?classType:Classtt">
          <span>箱数：</span><input type="text"  v-model="goxiang">
        </div>
        <div class="inp" :class="this.gottype!='大卡车'?classType:Classtt">
          <span>载重量：</span><input type="text"  v-model="gozhong">
        </div>
      </div>
      <div>
        <button @click="chegai">确认添加</button>
        <button @click="chongxi">重新输入</button>
      </div>
    </div>
</template>

<script>
    import { Toast } from 'mint-ui';
    //import  { Toast } from '../../../static/mint_ui/toast/style.css'
    export default {
        name: "add_vehicle",
      props:['userName'],
      data(){
          return{
            classType:'types',
            Classtt:"type",
            xius:'',
            //添加车辆信息
            gotime:"",//改时间
            gotchehao:'',//改车牌号
            gottype:'', //改车辆类型
            gotli:"",//改总里程
            gotyouhao:'',//改油耗
            gofyong:"",//改基本费用
            goyanglu:"",//改养路费
            gozongf:"",//改总费用
            gorshu:"",//改核载人数
            goxiang:" ",//改箱数
            gozhong:" ",//改载重量
            gopinp:" ",//该品牌

            shuju:''
          }
      },
      created(){

      },
      methods:{
          //添加数据
        chegai:function () {
          this.shuju = this.userName.name;
          console.log(this.shuju)
           var time=this.gotime;//改时间
           var chepai =this.gotchehao;//改车牌号
           var type=this.gottype; //改车辆类型
           var tli=this.gotli;//改总里程
           var youhao=this.gotyouhao;//改油耗
           var fyong=this.gofyong;//改基本费用
           var anglu=this.goyanglu;//改养路费
           var zongf=this.gozongf;//改总费用
           var rshu= this.gorshu;//改核载人数
           var xiang= this.goxiang;//改箱数
           var zhong= this.gozhong;//改载重量
           var inp=this.gopinp;//该品牌

           var chezhu = this.shuju;

          this.$http.post('/api/user/addVehicle', {
            license_plate_number:chepai,
            manufacturing_company:inp,
            purchasing_date:time,
            model_of_car:type,
            the_total_mileage:tli,
            fuel_cons:youhao,
            basic_maintenance_cost:fyong,
            road_toll:anglu,
            cumulative_total_cost:zongf,
            busload:rshu,
            carton_numbers:xiang,
            load_capacity:zhong,
            owner:chezhu
          },{}).then((response) => {
            //console.log(response);
          });
          //重新刷新数据
          this.getchusi();
          //发布后 清空文本框
          this.gotime = "";
          this.gotchehao = "";
          this.gottype = "";
          this.gotli = "";
          this.gotyouhao = "";
          this.gofyong = "";
          this.goyanglu = "";
          this.gorshu = "";
          this.gozongf = "";
          this.goxiang = "";
          this.gozhong = "";
          this.gopinp = "";
        },
        //清空input
        chongxi:function () {
          this.gotime = "";
          this.gotchehao = "";
          this.gottype = "";
          this.gotli = "";
          this.gotyouhao = "";
          this.gofyong = "";
          this.goyanglu = "";
          this.gorshu = "";
          this.gozongf = "";
          this.goxiang = "";
          this.gozhong = "";
          this.gopinp = "";
        }
      }
    }
</script>

<style scoped>
  .divinp{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .inp span{display: inline-block;vertical-align: middle;font-size: 16px}
  .inp input,.inp select{
    font-size: 16px;
    padding: 0 5px;
    width: 50%;
    height: 24px;
    display: inline-block;
  }


  .divinp>div.inp{width: 48%;}
  .divinp>div.inp span{
    font-size: 12px;
    text-align: right;
    min-width: 60px;
  }
  .divinp>div.inp>input,.inp select{height: 20px;margin-bottom: 5px}
</style>
